@use "src/styles/variables" as *;

.vm-tracings-view {
  display: grid;
  gap: $padding-medium;

  &-trace {
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: $border-divider;
      padding: $padding-small $padding-small $padding-small $padding-medium;

      &-title {
        flex-grow: 1;
        font-size: $font-size-medium;
        margin-right: $padding-small;

        &__query {
          font-weight: bold;
        }
      }

      &__expand-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        transition: transform 200ms ease-in-out;
        transform: rotate(-90deg);
        color: $color-text-secondary;

        &_open {
          transform: rotate(0);
        }
      }
    }

    &__nav {
      padding: $padding-medium $padding-medium $padding-medium 0;

      &_mobile {
        padding: $padding-small $padding-small $padding-small 0;
      }
    }
  }
}
